<template>
  <div class="app-container">
    <el-main>
      <div>
        <el-form ref="searchForm" size="mini" :inline="true" :model="searchForm">
          <search-form-box :show-more-btn="false">
            <template slot="showSearch">
              <el-form-item label="申请人" prop="name">
                <el-input v-model="searchForm.name" placeholder="请输入申请名称" size="small"/>
              </el-form-item>
              <el-form-item label="申请人职务" prop="post">
                <el-input v-model="searchForm.post" placeholder="请输入申请人职务" size="small"/>
              </el-form-item>
              <el-form-item label="所属公司" prop="company_id">
                <el-select v-model="searchForm.company_id" placeholder="请选择公司" clearable>
                  <el-option v-for="item in companyArr" :key="item.id" :label="item.name" :value="item.id">
                  </el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="印章类型" prop="seal_type_id">
                <el-select v-model="searchForm.seal_type_id" placeholder="请选择印章类型" size="small" clearable>
                  <el-option v-for="item in sealTypeList" :key="item.id" :label="item.name" :value="item.id"/>
                </el-select>
              </el-form-item>
              <el-form-item label="印章类型名称" prop="seal_type_name">
                <el-input v-model="searchForm.seal_type_name" placeholder="请输入印章类型名称" size="small"/>
              </el-form-item>
            </template>
            <template slot="searchBtn">
              <el-form-item>
                <el-button type="primary" size="small" @click="search">查询</el-button>
                <el-button size="small" @click="resetForm('searchForm')">重置</el-button>
              </el-form-item>
            </template>
          </search-form-box>
        </el-form>
      </div>

      <el-row v-if="!searchForm.is_manage_page" :gutter="20" type="flex" align="center" class="margin-tb-xs">
        <el-col>
          <el-button v-permission="'seal_apply_add'" type="primary" size="mini" @click="showAdd">添加申请
          </el-button>
        </el-col>
      </el-row>

      <el-table v-loading="tabLoading" :data="tableData" size="mini" border stripe tooltip-effect="dark"
                style="width: 100%" highlight-current-row
                row-key="id"
      >
        <el-table-column type="index" label="序号" width="50" align="center">
          <template slot-scope="scope">
            <span>{{ (searchForm.page - 1) * searchForm.page_size + scope.$index + 1 }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="applicant_name" label="申请人名称" width="100" align="center"/>
        <el-table-column prop="applicant_dept_name" label="申请人部门名称" width="160" align="center"/>
        <el-table-column prop="post" label="申请人职务" width="100" align="center"/>
        <el-table-column prop="company_name" label="所属公司" width="250" align="center"/>
        <el-table-column prop="seal_type_name" label="印章类型" width="160" align="center"/>
        <el-table-column prop="purpose" label="印章用途" min-width="300" header-align="center" align="left"/>
        <el-table-column label="操作" width="150" fixed="right" align="center">
          <template slot-scope="scope">
            <el-button type="primary" size="mini" @click="look(scope.row.id)">查看</el-button>
          </template>
        </el-table-column>
      </el-table>

      <!-- 分页数据 -->
      <el-pagination :current-page.sync="searchForm.page" :page-sizes="[10, 20, 50, 100, 200, 500]"
                     :page-size.sync="searchForm.page_size"
                     layout="total, sizes, prev, pager, next, jumper" :total="total"
                     @size-change="handleSizeChange"
                     @current-change="handleCurrentChange"
      />
    </el-main>
  </div>
</template>
<script>
import { get_seal_type_list } from '@/api/attendance/sael_out_bring'
import { list } from '@/api/attendance/seal_apply'
import SearchFormBox from '@/components/SearchFormBox'
import { get_company } from '@/api/system/department'

export default {
  name: 'SealApply',
  components: {
    SearchFormBox
  },
  data() {
    return {
      searchForm: {
        page: 1,
        page_size: 10,
        is_manage_page: this.$route.name != 'my_seal_apply',
        name: null,
        post: null,
        seal_type_id: null,
        seal_type_name: null,
        company_id: null
      },
      listParams: {
        page: 1,
        page_size: 10,
        is_manage_page: this.$route.name != 'my_seal_apply',
        name: null,
        post: null,
        seal_type_id: null,
        seal_type_name: null,
        company_id: null
      },
      tableData: [],
      tabLoading: false,
      total: null,
      sealTypeList: [],
      companyArr: []
    }
  },
  created() {
    this.initSealTypeList()
    this.getList()
    this.initCompany()
  },
  methods: {
    search() {
      this.searchForm.page = 1
      this.listParams = Object.assign({}, this.searchForm)
      this.getList()
    },
    resetForm(formName) {
      this.$refs[formName].resetFields()
      this.listParams = Object.assign({}, this.searchForm)
      this.getList()
    },
    handleSizeChange(val) {
      this.listParams.page_size = val
      this.getList()
    },
    handleCurrentChange(val) {
      this.listParams.page = val
      this.getList()
    },
    getList() {
      this.tabLoading = true
      list(this.listParams).then(
        res => {
          this.tabLoading = false
          this.tableData = res.data.records
          this.total = res.data.total
        }
      )
    },
    initSealTypeList() {
      get_seal_type_list().then(
        res => {
          this.sealTypeList = res.data
        }
      )
    },
    showAdd() {
      this.$router.push({
        name: 'seal_apply_details',
        params: {
          is_created: true
        }
      })
    },
    look(id) {
      this.$router.push({
        name: 'seal_apply_details',
        params: {
          look: true,
          id: id
        }
      })
    },
    /**
     * 初始化公司数据
     */
    initCompany() {
      get_company().then(
        res => {
          this.companyArr = res.data
        }
      )
    }
  }
}
</script>

<style scoped>
/* .app_main {
  padding: 0 20px;
}

/deep/ .el-form-item {
  margin-bottom: 0;
}

.search_box {
  margin-top: 10px;
}

.data_box {
  margin-top: 10px;
}

.paging_box {
  margin-top: 20px;
} */
</style>
